<template>
  <div class="container">
    <div class="navTop">
      <el-form label-width="100px" :model="paginationList">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="菜单名称:" prop="name">
              <el-input
                clearable
                placeholder="请输入菜单名称"
                size="large"
                v-model="paginationList.name"
              >
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="状态:" prop="status">
              <el-select
                clearable
                placeholder="请选择状态"
                size="large"
                v-model="paginationList.status"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="2">
            <el-button type="primary" round size="large" class="search" @click="getMenuListAPI"
              >搜索</el-button
            >
          </el-col>

          <el-col :span="2">
            <el-button size="large" round class="reset" @click="resetMenu">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-row type="flex" justify="end" style="margin-right: 160px; margin-top: 30px">
      <el-button type="danger" size="large" round @click="showDialog = true">新增</el-button>
    </el-row>

    <div class="content">
      <el-table style="width: 100%" :data="list">
        <el-table-column align="center" prop="name" label="菜单名称"></el-table-column>
        <el-table-column align="center" prop="icon" label="图标"></el-table-column>
        <el-table-column align="center" prop="orderSort" label="排序"></el-table-column>
        <el-table-column prop="displayStatus" label="显示状态">
          <template v-slot="{ row }">
            <span v-if="row.status === 1">隐藏</span>
            <span v-else>显示</span>
          </template>
        </el-table-column>
        <el-table-column prop="menuCategory" label="菜单类别">
<template v-slot="{ row }">
<span v-if="row.status === 1">目录</span>
<span v-else-if="row.status === 2">菜单</span>
<span v-else>按钮</span>
</template>
        <el-table-column align="center" prop="status" label="状态">
          <template v-slot="{ row }">
            <span v-if="row?.status === 1">正常</span>
            <span v-else>停用</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="editMenuAPI(row)">修改</el-button>
            <el-button type="text" @click="delMenuList(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <e-row
        type="flex"
        justify="center"
        style="display: flex; justify-content: center; align-items: center"
      >
        <el-pagination
          style="margin-top: 30px"
          v-model:current-page="page"
          v-model:page-size="size"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginationList.total"
          @current-change="changePage"
        ></el-pagination>
      </e-row>
    </div>
    <AddMenu
      v-model="showDialog"
      ref="editMenu"
      @closeDialog="closeDialog"
      @addMenuListAPI="getMenuListAPI"
    ></AddMenu>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getMenuList, delMenu } from '@/api/menuControl'
import { ElMessage, ElMessageBox } from 'element-plus'

import AddMenu from './components/add-menu.vue'
// 声明一个空数组来接收数据
const list = ref([])

//声明弹层
const showDialog = ref(false)
const closeDialog = () => {
  showDialog.value = false
}
// 分页数据
const paginationList = ref({
  page: 1,
  size: 10,
  total: 0
})

// 分页
const changePage = (newPage) => {
  paginationList.value.page = newPage
  getMenuListAPI()
}

// 定义状态数据
const options = ref([
  { label: '正常', value: 'normal' },
  { label: '停用', value: 'ban' }
])

onMounted(() => {
  getMenuListAPI()
})

// 获取主页数据
const getMenuListAPI = async () => {
  const res = await getMenuList(paginationList.value)
  console.log(res)
  list.value = res.data
  paginationList.value.total = res.total
}

//删除
const delMenuList = async (id) => {
  ElMessageBox.confirm('确定要删除吗?', 'Warning', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await delMenu(id)
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
      getMenuListAPI()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败'
      })
    })
}

// 重置模糊搜索
const resetMenu = () => {
  (paginationList.value.name = ''), (paginationList.value.status = ''), getMenuListAPI()
}

// 修改
const editMenu = ref(null)
const editMenuAPI = (row) => {
  console.log(row)
  showDialog.value = true
  editMenu.value.editConfirm(row)
}
</script>

<style lang="less" scoped>
.navTop {
  height: 120px;
  background-color: #fff;
}
.content {
  margin-top: 25px;
  background-color: #fff;
}
.el-form-item {
  display: block;
  width: 80%;
}
::v-deep.el-select {
  width: 100%;
  margin-left: 50px;
}
.el-input {
  margin-left: 25px;
}
.search {
  margin-top: 30px;
  margin-left: 40px;
}
.reset {
  margin-top: 30px;
  margin-left: 60px;
}
</style>
